<template>
  <div style="display: flex; justify-content: center">
    <el-popover placement="bottom" trigger="click">
      <div slot="reference" style="display:flex; align-items: center">
        <span style="margin-right: 5px">{{label}}</span>
        <icon-svg name="filter" v-if="model[modelKey] == null || model[modelKey] === ''"/>
        <icon-svg name="filling" v-else/>
      </div>
      <div>
        <el-select v-if="stOptions" v-model="model[modelKey]" :placeholder="stPlaceholder" clearable filterable @change="searchPopover">
          <el-option v-for="(item, index) in stOptions" :key="index" :label="item[stItemLabel]" :value="item[stItemValue]"/>
        </el-select>
        <el-input v-else v-model="model[modelKey]" :placeholder="itPlaceholder" clearable @change="searchPopover"/>
        <!--<div class="button-area">
          <el-button size="mini" @click="hiddenPopover">{{clearName}}</el-button>
          <el-button size="mini" type="primary" @click="searchPopover">{{searchName}}</el-button>
        </div>-->
      </div>
    </el-popover>
  </div>
</template>

<script>
  export default {
    name: 'table-header-search',
    props: {
      clearName: {
        type: String,
        default: '清空'
      },
      searchName: {
        type: String,
        default: '搜索'
      },
      label: {
        type: String,
        required: true
      },
      model: {
        type: Object,
        required: true
      },
      modelKey: {
        type: String,
        required: true
      },
      itPlaceholder: { // 输入框占位符
        type: String,
        default: '请输入内容: 按回车查询'
      },
      stOptions: { // 下拉框选项
        type: Array
      },
      stPlaceholder: { // 下拉框占位符
        type: String,
        default: '请选择内容: 自动查询'
      },
      stItemLabel: { // 下拉框item的key名称
        type: String,
        default: 'name'
      },
      stItemValue: { // 下拉框item的value名称
        type: String,
        default: 'id'
      }
    },
    methods: {
      searchPopover () {
        this.$emit('query')
      },
      hiddenPopover () {
        this.model[this.modelKey] = ''
        this.$emit('query')
      }
    }
  }
</script>

<style scoped>
  .button-area {
    margin-top: 10px;
    text-align: center;
  }
</style>
